<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="robots" content="all"/>
    <link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon"/>
    <title>文章</title>
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/master.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/gloable.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/nprogress.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/blog.css}" type="text/css"/>
</head>
<body>
<div class="header">
</div>

<div th:replace="comm/Wl2022-Comm :: #commHeader"></div>

<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="col-content">
            <div class="inner">
                <article class="article-list bloglist" id="LAY_bloglist">
                    <!--对全体文章的遍历，使用局部刷新的技术，将该页面的数据装在一个请求域中（先将置顶的），右侧标签栏点击后，进行局部刷新-->
                    <div th:fragment="articleList" th:id="articleListAll">
                        <section class="article-item zoomIn article" th:each=" article : ${articleList}">
                            <div class="fc-flag" th:if="${article.isTop==1}">置顶</div>
                            <h5 class="title">
                                <span class="fc-blue" th:if="${article.quoteLink}==''">【原创】</span>
                                <a>[[${article.title}]]</a>
                            </h5>
                            <div class="time">
                                <span class="day">[[${#dates.day(article.createDate)}]]</span>
                                <span class="month fs-18">[[${#dates.month(article.createDate)}]]<span
                                        class="fs-14">月</span></span>
                                <span class="year fs-18 ml10">[[${#dates.year(article.createDate)}]]</span>
                            </div>
                            <div class="content">
                                <a th:href="@{/read/{articleId}/{articleType}(articleId=${article.id},articleType=${article.articleType})}"
                                   class="cover img-light">
                                    <img th:src="@{/image/articleImages/{imageName}(imageName=${article.image})}">
                                </a>
                                [[${article.summary}]]
                            </div>
                            <div class="read-more">
                                <a th:href="@{/read/{articleId}/{articleType}(articleId=${article.id},articleType=${article.articleType})}"
                                   class="fc-black f-fwb">继续阅读</a>
                            </div>
                            <aside class="f-oh footer">
                                <div class="f-fl tags">
                                    <span class="fa fa-tags fs-16"></span>
                                        <a class="tag" th:each="byType :${categoryNavigation}" th:if="${article.articleType}==${byType.id}">[[${byType.articleType}]]</a>
                                </div>
                                <div class="f-fr">
									<span class="read">               
										<i class="fa fa-eye fs-16"></i>               
										<i class="num">[[${article.views}]]</i>
									</span>
                                    <span class="ml20">
										<i class="fa fa-comments fs-16"></i>
										<a href="javascript:void(0)" class="num fc-grey">[[${article.commentSize}]]</a>
									</span>
                                </div>
                            </aside>
                        </section>
                        <div class="layui-flow-more">没有更多了</div>
                    </div>
                </article>
            </div>
        </div>
        <div class="col-other">
            <div class="inner">
                <div class="other-item" id="categoryandsearch">
                    <!--                    class="search"-->
                    <div class="search">
                        <!--获取关键字检索-->
                        <!--想法：首先通过前端手段根据所有文章标题，进行搜索指引，指引中包括文章id和文章类型
                            点击搜索后，获取输入框内容进行检索并局部刷新-->
                        <label class="search-wrap">
                            <input type="text" id="searchtxt" placeholder="输入关键字搜索"/>

                            <span class="search-icon">
					                <i class="fa fa-search" th:onclick="searchClick1()"></i>
                            </span>
                        </label>
                        <ul class="search-result"></ul>
                    </div>
                    <!--将所有类型都展示出来，便于检索-->
                    <ul class="category mt20" id="category">
                        <li data-index="0" class="slider"></li>
                        <li data-index="1">
                            <a th:onclick="retrieveArticle(0)">全部文章</a>
                        </li>
                        <li th:data-index="${s.count}+1"
                            th:each="byType,s :${categoryNavigation}">
                            <a th:onclick="'retrieveArticle('+${byType.id}+')'">[[${byType.articleType}]]</a>
                        </li>
                    </ul>
                </div>
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
                <div class="article-category">
                    <!--将所有类型都展示出来，便于检索-->
                    <div class="article-category-title">分类导航</div>
                    <a th:each="byType :${categoryNavigation}" th:onclick="'retrieveArticle('+${byType.id}+')'">[[${byType.articleType}]]</a>
                    <div class="f-cb"></div>
                </div>
                <!--遮罩-->
                <div class="blog-mask animated layui-hide"></div>
                <div class="other-item">
                    <h5 class="other-item-title">热门文章</h5>
                    <div class="inner">
                        <!--获取点赞数量最多的8个文章进行遍历-->
                        <ul class="hot-list-article">
                            <li th:each="popularArticle : ${popularArticles}"><a
                                    th:href="@{/read/{articleId}/{articleType}(articleId=${popularArticle.id},articleType=${popularArticle.articleType})}">[[${popularArticle.title}]]</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="other-item">
                    <h5 class="other-item-title">置顶推荐</h5>
                    <div class="inner">
                        <!--获取文章中置顶状态为1的文章，按照创造时间选择最后创造的3个-->
                        <ul class="hot-list-article">
                            <li th:each="top:${topRecommendation}"><a
                                    th:href="@{/read/{articleId}/{articleType}(articleId=${top.id},articleType=${top.articleType})}">[[${top.title}]]</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="other-item">
                    <h5 class="other-item-title">最近访客</h5>
                    <div class="inner">
                        <!--最新访客，每当用户登录一次，更新他的创建时间，这样就可以判断最新访客-->
                        <dl class="vistor">
                            <dd th:each="visitor:${recentVisitors}"><a><img
                                    th:src="@{/image/userImage/{imageName}(imageName=${visitor.image})}"
                                    th:alt="${visitor.nickName}"><cite>[[${visitor.nickName}]]</cite></a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="comm/Wl2022-Comm::#commFooter"></div>


<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/yss/article.js}"></script>
<script th:src="@{/js/yss/gloable.js}"></script>
<script th:src="@{/js/plugins/nprogress.js}"></script>

<script type="text/javascript">
    NProgress.start();
    window.onload = function () {
        NProgress.done();
    };
</script>
<script type="text/javascript">
    layui.use(['jquery', 'layer'], function () {
        const $ = layui.jquery;
        const layer = layui.layer;
        window.retrieveArticle = function (typeId) {
            //根据类型检索文章
            $.ajax({
                type: "Post",
                data: {
                    typeId: typeId
                },
                url: "[[@{/retrieveArticle}]]",
                success: function (data) {
                    $("#articleListAll").html(data);
                }
            });
        }

        //对搜索框实现点击事件
        window.searchClick1 = function () {
            //获取到的搜索框的值
            let searchText = $("#searchtxt").val().trim();
            console.log(searchText);
            if (searchText == null || searchText === "") {
                layer.msg('搜索输入框不能为空', {icon: 2});
                return false;
            }else {
                $.ajax({
                    type: "Post",
                    data: {
                        text: searchText
                    },
                    url: "[[@{/searchResult}]]",
                    success: function (data) {
                        $("#articleListAll").html(data);
                    },
                    error: function () {
                        layer.open({
                            title: '搜索错误',
                            content: '程序故障！关键词搜索出现异常（请在网站下方联系管理员）',
                            icon: 2
                        });
                        $('#searchtxt').val('');
                    }
                });
            }
        }
    });
</script>

</body>
</html>
